<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<title></title>
        <link href="css/swiper.min.css" rel="stylesheet">
		<link href="css/style.css?sad" rel="stylesheet">
	</head>
	<body>
		<div class="main">
			<div class="ranking-list">
				<div class="ranking-tab">
                    <a class="on">战队完赛榜</a>
                    <a>个人完赛榜</a>
                    <a>个人早鸟榜</a>
                </div>
                <div class="ranking-swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <ul>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                </ul>
                            </div>
                            <div class="swiper-slide">
                                <ul>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>34 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                </ul>
                            </div>
                            <div class="swiper-slide">
                                <ul>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>33 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                    <li>
                                        <b>1</b>
                                        <img src="img/img4.png">
                                        <b class="tn">Team lululemon</b>
                                        <b>35 Lesson</b>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text">
                    <b>* 男性成员3人以上的战队，可参与活动排名</b>
                    <p>如果多人成绩相同，则越早达到该成绩的，排名越靠前</p>
                    <a class="btn a">返 回</a>
                </div>
			</div>
		</div>
	    <script src="js/jquery.min.js"></script>
        <script src="js/swiper.min.js"></script>
        <script>
            var mySwiper = new Swiper('.swiper-container', {
                on: {
                    slideChangeTransitionStart: function(){
                        $('.ranking-tab a').eq(this.activeIndex).addClass('on').siblings().removeClass('on');;
                    },
                },
            })
            $('.ranking-tab a').on('click',function(){
                $(this).addClass('on').siblings().removeClass('on');
                mySwiper.slideTo($(this).index())
            })
        </script>
	</body>
</html>